{% load static %}
<!DOCTYPE html>
<html class="spectrum spectrum--medium spectrum--lightest" lang="en">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/vars/spectrum-global.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/vars/spectrum-medium.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/vars/spectrum-lightest.css' %}">

    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/icon/index-vars.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/label/index-vars.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/alert/index-vars.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/table/index-vars.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/button/index-vars.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/sidenav/index-vars.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/textfield/index-vars.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/typography/index-vars.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/fieldlabel/index-vars.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum-css/actiongroup/index-vars.css' %}">

    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/bootstrap-grid.css' %}">

    <title>Macondo Home</title>
</head>
<body style="background-color: #f4f4f4">

<main class="col-6 mx-auto pt-5">

    <nav class="row justify-content-end py-3" style="background-color: #ffffff">
        <div class="spectrum-SideNav-item">
            <a href="/home" class="spectrum-SideNav-itemLink">Home</a>
        </div>

        <div class="spectrum-SideNav-item">
            <a href="/view" class="spectrum-SideNav-itemLink">View</a>
        </div>

        <div class="spectrum-SideNav-item mr-5">
            <a href="/add" class="spectrum-SideNav-itemLink">Add</a>
        </div>
    </nav>

    {% block content %}

    {% endblock content %}

</main>

<script type="module">
    import loadIcons from '{% static 'loadicons/index.js' %}';

    loadIcons('{% static 'spectrum-css/icon/spectrum-css-icons-medium.svg' %}')
</script>

</body>
</html>